<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务详情</title>

    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Axios CDN -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 配置Tailwind自定义颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .login-card {
                @apply bg-white rounded-2xl shadow-lg p-8 w-full max-w-md transition-all duration-300 hover:shadow-xl;
            }
            .input-field {
                @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition duration-200;
            }
            .btn-primary {
                @apply w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-lg transition duration-200 transform hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-primary/50;
            }
        }
    </style>
</head>

<body>
<h2>欢迎来到任务详情页</h2>

<div>
    <h2>任务详情</h2>

    <div>
        <h2>单号：[[${task.id}]]</h2>
        <h2>申请时间：[[${task.createTime}]]</h2>
    </div>

    <!--根据不同的任务，展示不同的表单-->
    <div th:if="${taskForm == 'ask_leave'}">
        <div th:replace="fragments/form_ask_leave.frag.html"></div>
    </div>
    <div th:if="${taskForm == 'raise_salary'}">
        <div th:replace="fragments/form_raise_salary.frag.html"></div>
    </div>

</div>

</body>
</html>
